React Atomicデザインで設計する

どの界隈まで広がるのかわからないが、少なくともReactやVueの世界では有名な設計手法の1つ「Atomicデザイン」。

基本的にプログラムは量が増えれば増えるほど、どこに何があるのか分からなくなってグチャグチャになる。

その分、保守性も下がっていき、開発スピードは下がるわ、バグが孕む可能性はあるわで全く良いことがなくなる。

ReactやVueの世界では、コンポーネント指向という考え方でシステムが組まれていく。

つまり、システムが増えていけば増えていくほど、コンポーネントも増えていくってことになる。

戦略無しにコンポーネントを適当に作ってしまうと、言うまでもなく保守性が下がる。

「そうならないように設計しよう」という思想のもと、お手本的な立ち位置にある手法が「Atomicデザイン」。

初心者の自分でも知ってるので、それなりに有名な手法なのかも。

自分の浅い経験則によると、基本的にReact、Vueでシステムを組む際は以下あたりに気をつけてルールを確立しないと保守性が下がる。（凝集度の考え方は大切にしないと、システムが大きくなる度に保守性が下がるでしょう）

1. ドメインが入る/入らないでコンポーネントを分ける

2. Serverとデータ（ドメインに直で関わるやつ）をCRUDする系のAPIは全てRepositoryでラップした方がいい

3. そのコンポーネントでしか利用されない機能などは近くに置くこと。無理に汎用化しない（凝集度）

4. コンポーネントを形作る見た目とロジックは別ファイルで管理する（Container/Presenterパターン）

自分は解説しない。他の人に解説してもらった方がいい。

自分が参考になったと思う記事をここに貼っておく。

一番参考になった記事。Atomicデザインに完全に従う必要はなく、自分たちで考えた保守性が上がるやり方を採用してる

確かにコンポーネントを細かく分けすぎてもわかりにくいよなぁと。

Atomicデザインとはをサクッと知れる